
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图标选择组件 - layui</title>

    <link href="/lib/layui/css/layui.css" rel="stylesheet" />
</head>
<body>

    <div class="layui-container layui-inline-container" style="padding: 30px 0;">
        <input type="hidden" name="test" id="test1" class="test" placeholder="select icon">
        <input type="hidden" name="test" id="test2" value="layui-icon-chrome" title="Chrome" class="test" placeholder="请选择">

        <br>

        <input type="hidden" name="test" id="test3" value="layui-icon-chrome" class="test" placeholder="请选择" lay-options="{isSplit: true, replace: 'icon'}">
        <input type="hidden" name="test" id="test4" value="&#xe684;" class="test" placeholder="请选择" lay-options="{isSplit: true, type:'unicode', replace: 'icon'}">

        <br>

        <input type="hidden" name="test" id="test5" value="" class="test" lay-options="{isSplit: true, replace: 'icon'}">
        <input type="hidden" name="test" id="test6" value="" title="Chrome" class="test" placeholder="请选择" lay-options="{style:'', replace: 'title'}">

        <br>
        <br>

        <div class="layui-input-wrap layui-inline">
            <input type="text" name="test" id="test7" class="layui-input test" placeholder="请选择" lay-options="{replace: false}">
            <div class="layui-input-suffix">
                <i class="layui-icon layui-icon-find-fill"></i>
            </div>
        </div>

        <div class="layui-input-wrap layui-inline">
            <input type="text" name="test" id="test8" class="layui-input test" placeholder="不开启分页" lay-options="{replace: false, page: false}">
        </div>

        <br>

        <div class="layui-input-wrap layui-inline">
            <input type="text" name="test" id="test9" class="layui-input test" placeholder="fontclass" lay-options="{replace: false}">
            <div class="layui-input-suffix">
                <i class="layui-icon layui-icon-down"></i>
            </div>
        </div>

        <div class="layui-input-wrap layui-inline">
            <input type="text" name="test" id="test10" class="layui-input test" placeholder="unicode" lay-options="{replace: false, type:'unicode'}">
            <div class="layui-input-suffix">
                <i class="layui-icon layui-icon-down"></i>
            </div>
        </div>

        <br>

        <div class="layui-input-wrap layui-inline">
            <input type="text" name="test" id="test100" class="layui-input" placeholder="自定义默认图标">
            <div class="layui-input-suffix">
                <i class="layui-icon layui-icon-down"></i>
            </div>
        </div>

        <div class="layui-input-wrap layui-inline">
            <input type="text" name="test" id="test101" class="layui-input" placeholder="扩展第三方图标">
            <div class="layui-input-suffix">
                <i class="layui-icon layui-icon-down"></i>
            </div>
        </div>

    </div>

    <script src="/lib/layui/layui.js"></script>
    <script>
        layui.use('icon', function () {
            var icon = layui.icon;

            icon.render({
                elem: '.test'
                , style: 'color: #5FB878;'
                , placeholder: ''
                //,isSplit: true
                , page: true
                //,search: false
                , click: function (obj) {
                    console.log(obj)
                    //this.elem.val(obj.className)
                }
                , ready: function () {
                    console.log(1)
                }
            });



            icon.render({
                elem: '#test100'
                , id: 'diy-test100'
                , data: [
                    { "title": "Android 安卓", "fontclass": "layui-icon-android", "unicode": "&#xe684;" }
                    , { "title": "Apple IOS 苹果", "fontclass": "layui-icon-ios", "unicode": "&#xe680;" }
                    , { "title": "Windows", "fontclass": "layui-icon-windows", "unicode": "&#xe67f;" }
                    , { "title": "实心", "fontclass": "layui-icon-heart-fill", "unicode": "&#xe68f;" }
                ]
                , replace: false //不替换绑定元素
                , search: false
                , page: false
            });

            icon.render({
                elem: '#test101'
                , data: [
                    {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
                ]
                , fontfamily: 'iconfont'
                , replace: false //不替换绑定元素
            });

        });
    </script>
</body>
</html>
